<template>
  <div class="login">
    <el-row>
      <el-col :span="12" class="img_login">
        <img src="../../assets/Login_back.jpg" alt="" />
      </el-col>
      <el-col :span="12">
        <el-form class="login_form" :model="loginForm">
          <span class="login_title">Welcome Back!</span>
          <el-form-item label="账号" prop="username">
            <el-input v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password"></el-input>
          </el-form-item>
          <el-button class="login-btn" @click="handleClick"> 登录</el-button>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { login } from "@/request/api/defaultApi/defaultApi";
export default {
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "123456",
      },
    };
  },
  methods: {
    async handleClick() {
      try {
        const response = await login({ params: this.loginForm }); // 调用login方法

        // 处理登录成功的逻辑
        if (response.data.token) {
          localStorage.setItem("token", response.data.token);
          localStorage.setItem(
            "userInfo",
            JSON.stringify(response.data.userInfo)
          );
          console.log(this.$route.path);
          if (this.$route.path !== "/home/staffManagement") {
            this.$router.push({
              path: "/home/staffManagement",
            });
          }
          this.$message({
            type: "success",
            message: "登录成功！",
          });
        }
      } catch (error) {
        console.log("请求错误");
        // 处理登录失败的逻辑
      }
    },
  },
};
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  margin: auto 0;
  overflow: hidden;
  .img_login {
    height: 706px;
    overflow: hidden;
    img {
      width: 100%;
      height: 706px;
    }
  }
  .login_form {
    width: 400px;
    height: 300px;
    padding-left: 20px;
    margin-top: 200px;

    .login_title {
      font-size: 26px;
      font-weight: 600;
      letter-spacing: 0.5px;
      line-height: 36px;
      color: rgba(14, 14, 25, 1);
      text-align: left;
      vertical-align: top;
    }
    .login-btn {
      width: 300px;
      border-radius: 10px;
    }
  }
}
</style>
